<template>
  <view class="main">
    <view class="swiper">
      <swiper @change="swiperChange" class="swiper-box" circular  :autoplay="true" :interval="2000"
              :duration="500">
        <swiper-item v-for="(item, index) in 4" :key="index" class="item">
          <image
              src="https://www.bing.com/th/id/OIP.h6Sl0aVRPzCEedtNef4v8wHaE7?w=246&h=186&c=7&r=0&o=5&pid=1.7"
              mode="aspectFill"/>
          <view class="current-box">
            <view class="current">
              <image src="/static/icon/current.png" mode="aspectFill"/>
              <view class="num">{{current}}/5</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="content ">
      <view class="common desc">
        <view class="desc-box">
          <view class="one dispaly-just-between">
            <view class="price">599.00</view>
            <view class="collect">
              <view class="collect-box dispaly-center">
                <view class="num">收藏数10</view>
                <view class="icon">
                  <image src="/static/icon/hart.png" mode="aspectFill"/>
                </view>
              </view>
            </view>
          </view>
          <view class="title">99新PS5手柄</view>
          <view class="line"></view>
          <view class="user dispaly-just-between">
            <view class="info dispaly-center">
              <view class="avatar ">
                <image
                    src=""
                    mode="aspectFill"/>
                <image class="q" src="/static/icon/q.png" mode="aspectFill"/>
              </view>
              <view class="name">刘海柱</view>
            </view>
            <view class="user-id">ID9987</view>
          </view>
        </view>
      </view>
      <view class="common text">
          <view class="title dispaly-align-center">
            <image class="l" src="/static/icon/p.png" mode="aspectFill"/>
            <view class="txt">详情描述</view>
            <image class="r" src="/static/icon/p.png" mode="aspectFill"/>
          </view>
        <view class="f-con">
          <up-parse :content="content"></up-parse>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-box">
      <view class="item-box dispaly-just-between">
        <view class="item" @click="bargainingShow = true">
          <view class="b-txt dispaly-align-center">协议</view>
          <image src="/static/icon/xy.png" mode="aspectFill"/>
        </view>
        <view class="item">
          <view class="b-txt dispaly-align-center" style="color: #FFD257 " @click="buy">购买</view>
          <image src="/static/icon/buy.png" mode="aspectFill"/>
        </view>
      </view>
  </view>

<!--  议价-->
  <Pop title="议价" :show="bargainingShow" @close="bargainingShow = false">
    <view class=" w-498 bary-box">
      <view>
        <view class="ipt-box">
          <view class="ipt-bg">
            <image  src="/static/pop/four.png" mode="aspectFill"/>
            <input placeholder="请输入议价"/>
          </view>
          <view class="edit">
            <image  src="/static/pop/five.png" mode="aspectFill"/>
          </view>
        </view>
        <view class="submit-box dispaly-align-center">
          <view class="dispaly-align-center submit-content" @click="submitBarg">
            <image  src="/static/pop/seven.png" mode="aspectFill"/>
            <view class="submit">提交</view>
          </view>
        </view>
      </view>
    </view>
  </Pop>
<!--  通知-->
  <Pop title="通知" :show="noticeShow" @close="noticeShow = false">
    <view class=" w-498 bary-box">
      <view class="notice ">
        <view class="notice-txt dispaly-col-center">
          <view class="not-item">议价成功</view>
          <view class="not-item">前往购买</view>
        </view>
        <view class="submit-box dispaly-align-center">
          <view class="dispaly-align-center submit-content" @click="noticeShow = false">
            <image  src="/static/pop/seven.png" mode="aspectFill"/>
            <view class="submit">提交</view>
          </view>
        </view>
      </view>
    </view>
  </Pop>
</template>

<script setup>
import {ref} from "vue";

// 议价show
const bargainingShow = ref(false)
// 通知show
const noticeShow = ref(false)

// 提交议价
const submitBarg = () => {
  bargainingShow.value = false
  noticeShow.value = true
}

// 购买
const buy = () => {
  uni.navigateTo({
    url: `/subPackage/index/orderDetail`
  })
}

const content = ref(`<p>露从今夜白，月是故乡明</p><img src="https://cdn.uviewui.com/uview/swiper/2.jpg" alt="Image Description" />`);
const current = ref(1)
const swiperChange = (data) => {
  current.value = data.detail.current + 1
}
</script>

<style lang="scss" scoped>
.common {
  padding: 40rpx 20rpx;
  background: #ffd257;
  border-radius: 5rpx;
  border: 5rpx solid #4e3b0c;
}

.btn-box {
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;
  .item-box {
    padding: 18rpx 26rpx 0 26rpx;
    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;
      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }
      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}
.main {
  padding-bottom: 174rpx;
  .swiper {
    position: relative;
    z-index: -1;
    .swiper-box {
      height: 707rpx;
      .item {
        image {
          width: 100%;
          height: 707rpx;
        }
        .current-box {
          position: absolute;
          bottom: 29rpx;
          right: 34rpx;

          .current {
            position: relative;
            width: 78rpx;
            height: 38rpx;
            image {
              width: 78rpx;
              height: 38rpx;
            }
            .num {
              position: absolute;
              top: 0;
              left: 20rpx;
              width: 78rpx;
              height: 38rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
            }
          }
        }

      }
    }
  }
  .content {
    margin-top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
    background: #ffbf0f;
    padding: 40rpx;
    .desc {
      padding: 10rpx;
      margin-bottom: 32rpx;
      .desc-box {
        border: 8rpx solid #e6bd4e;
        padding: 20rpx;
        .one {
          margin: 0 0 32rpx 0;
          .price {
            font-family: IPix;
            font-size: 44rpx;
            color: #000000;
          }
          .collect {
            .collect-box {
              .num {
                font-family: IPix;
                font-size: 28rpx;
                color: #000000;
              }
              .icon {
                margin-left: 5rpx;
                padding-bottom: 3rpx;
                image {
                  width: 35rpx;
                  height: 29rpx;
                }
              }
            }
          }
        }
        .title {
          font-family: IPix;
          font-size: 36rpx;
          color: #4E3B0C;
        }
        .line {
          height: 6rpx;
          width: 604rpx;
          background: #83681c;
          margin: 28rpx 0;
        }
        .user {
          .info {
            .avatar {
              margin-right: 20rpx;
              border: 1rpx solid #FFFFFF;
              border-radius: 50%;
              width: 74rpx;
              height: 74rpx;
              position: relative;
              .q {
                width: 74rpx;
                height: 74rpx;
              }
              image {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 74rpx;
                height: 74rpx;
                border-radius: 50%;
              }
            }
            .name {
              font-family: IPix;
              font-size: 22rpx;
              color: #000000;
            }
          }
          .user-id {
            font-family: IPix;
            font-size: 22rpx;
            color: #000000;
          }
        }
      }

    }

    .text {
      .title {
        margin-bottom: 30rpx;
        .txt {
          font-family: IPix;
          font-size: 30rpx;
          color: #4E3B0C;
          margin: 0 10rpx;
        }
        .l, .r {
          width: 16rpx;
          height: 16rpx;
        }
      }

    }
  }
}
.bary-box {
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
  .submit-box {
    width: 100%;
    margin-top: 80rpx;
    .submit-content {
      width: 146rpx;
      height: 86rpx;
      position: relative;

      image {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 146rpx;
        height: 86rpx;
      }
      .submit {
        font-family: IPix;
        font-size: 30rpx;
        color: #FFFFFF;
        position: absolute;
        transform:(-50%,-50%)
      }
    }

  }
  .ipt-box {
    position: relative;
    width: 404rpx;
    height: 60rpx;
    .ipt-bg {
      width: 404rpx;
      height: 60rpx;
      position: relative;
      input  {
        position: absolute;
        top: 0;
        left: 0;
        height: 60rpx;
        padding: 0 0 0 20rpx;
        color: #fff;
      }
      image {
        width: 404rpx;
        height: 60rpx;
      }
    }
  }
  .edit {
    position: absolute;
    top: 10rpx;
    right: 15rpx;
    image {
      width: 23rpx;
      height: 23rpx;
    }
  }
}
</style>